<template>
	<view class="home">
		<div class="title">
			<div class="t1">绩优股票推荐</div>
			<div class="t2"></div>
			<div class="t3">Stock recommendation</div>
		</div>

		<div class="itemBox">
			<div class="items" v-for="i in itemList" :key="i.stockCode">
				<!-- <div class="imgBox"><img :src="i.src" alt="" /></div> -->
				
				<!-- 引入自定义组件 echarts_  自定义属性code中传入股票代码 -->
				<div class="imgBox"><echarts_ :code="i.stockCode"></echarts_></div>
				<div class="name">{{ i.name }}</div>
				<div class="industry">{{ i.industry }}</div>
			</div>
		</div>

		<div class="messageBox">
			<div class="center">
				<div class="msg" style="margin-top: 100px;">
					<div class="msgTitle" >技术选型</div>
					<div class="msgContent" >
						
						<br>
						SpringBoot+Vue 响应迅速,交互体验良好
					</div>
				</div>
				<div class="msg" style="margin-top: 100px;">
					<div class="msgTitle">策略优势</div>
					<div class="msgContent">
						<br>
						完全自选策略，每日数据更新，保证短线交易推荐信息实时可达。 	
					</div>
				</div>
				<div class="msg" style="margin-top: 100px;">
					<div class="msgTitle">用户留言</div>
					<div class="msgContent">
						<br>
						能够很好的得推测股票的涨跌趋势，很有参考价值。
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
import { homeSell } from '../../api/api.js';
export default {
	name: 'home',
	data() {
		return {
			itemList: []
		};
	},
	async beforeMount() {
		let res = await homeSell();
		this.itemList = res.data;
	}
};
</script>

<style lang="less">
.home {
	.itemBox {
		padding-top: 10px;
		width: 1280px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		.items {
			width: 350px;
			padding: 5px;
			border: 1px solid #ccc;
			box-shadow: 0 0 10px #ccc;
			text-align: center;
			transition: 0.5s;
			position: relative;
			top: 0px;
			.imgBox {
				width: 350px;
				height: 350px;
				position: relative;
				overflow: hidden;
				img {
					max-width: 100%;
					max-height: 100%;
					position: absolute;
					top: 0px;
					left: 0px;
					bottom: 0px;
					right: 0px;
					margin: auto;
					transition: 0.5s;
				}
			}
			.name {
				line-height: 30px;
				font-size: 18px;
				font-weight: bold;
				color: #000;
				transition: 0.5s;
				padding-top: 15px;
			}
			.industry {
				transition: 0.5s;
				color: #666;
				font-size: 16px;
				line-height: 40px;
				&::before {
					content: '所属行业：';
					color: #666;
				}
			}
			&:hover {
				top: -5px;
				.imgBox {
					img {
						transform: scale(1.1);
					}
				}
				.name {
					color: #e6a23c;
				}
				.industry {
					color: #e6a23c;
				}
			}
		}
	}
	
	.messageBox {
		background-color: #545c64;
		margin-top: 60px;
		.center {
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
			width: 1280px;
			padding-top: 20px;
			padding-bottom: 100px;
			margin: 0 auto;
			.msg {
				width: 362px;
				text-align: center;
				color: #eee;
				.msgTitle{
					font-size: 28px;
					line-height: 60px;
				}
				.msgContent{
					line-height: 22px;
				}
			}
		}
	}
}
</style>
